<template>
  <el-card>
    <el-form ref="addForm" :model="addData" :rules='rules' label-width="100px">
      <el-form-item prop="rolename" label="角色名称">
        <el-input
          v-model="addData.rolename"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item prop="menus" label="角色权限">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          default-expand-all
          ref="tree"
          :default-checked-keys="addData.menus.split(',')"
        >
        </el-tree>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-radio-group v-model="addData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="status" label="角色名称">
        <el-button type="primary" @click="submitForm">立即更新</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getMenuList } from "../../request/menu";
import { getRoleById } from "../../request/role";
export default {
  data() {
    // menus的自定义表单校验规则
      const menuValidate =(rule,value,callback)=>{
        const checkedKeys=this.$refs.tree.getCheckedKeys()
        if(checkedKeys.length===0){
          callback(new Error('请选择操作权限'))
        }
        callback()
      };
    //  双向数据 模型
    return {
      addData: {
        rolename: "",
        menus: "",
        status: 1,
      },
      
      // 表单效验
      rules: {
        rolename: {required:true,message:"请输入角色名称"},
        menus: {validator:menuValidate,trigger:'blur'},
        status: {required:true,message:"请选择状态"},
      },
      // 权限类表
      data: [],
      // 属性控件   关系到二级菜单的显示与否
      defaultProps: {
        // children指定存储子节点的属性名
        children: "children",
        // label指定存储标题的属性名
        label: "title",
      },
    };
  },
  created() {
    this.getMenuList();
    this.getRoleById()
  },
  methods: {
    async getMenuList() {
      const list = await getMenuList();
      if (list) {
        this.data = list;
      }
    },
    // 页面加载就有的数据
    async getRoleById(){
        const res=await getRoleById(this.$route.params.id)
        if(res){
            // 更新数据
            this.addData=res
        }
    },
    submitForm(){
      // validate表单终极效验规则
      this.$refs.addForm.validate(async valid=>{
        // if(valid)表示表单效验通过
        if(valid){
          // 给menus赋值
          this.addData.menus=this.$refs.tree.getCheckedKeys().join(',')
          // 向后端发送数据请求          角色添加接口     传数据
          const res=await this.$http.post('/api/roleedit',{...this.addData,id:this.$route.params.id});                          //接口写错 是无法提交成功的 
          
          // res.code===200表示如果成功
          if(res.code===200){
            this.$success("更新成功");
            return this.$router.push('/role')
          }
          this.$error('更新失败')
        }
      })
        
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 600px;
  margin: 0 auto;
}
</style>